
.ub-form {
    font-size: var(--font-size);

    &.view {
        .line {
            .field {
                border-bottom: 0.05rem solid #EEE;
                min-height: 1.5rem;
            }
        }
    }

    &.vertical {
        .line {
            padding-left: 0;
            padding-right: 0;
            margin: 0;

            .label {
                float: none;
                display: block;
                text-align: left;
                margin-left: 0;
                width: 100%;
            }
        }
    }

    &.wide {
        .line {
            padding-left: 8rem;

            .label {
                width: 7.5rem;
                margin-left: -7.5rem;
            }
        }
    }

    &.wide-lg {
        .line {
            padding-left: 12rem;

            .label {
                width: 11.5rem;
                margin-left: -11.5rem;
            }
        }
    }

    .line {
        padding: 0.25rem 1.5rem 0.25rem 5rem;
        //overflow: hidden;
        position: relative;

        &.flat {
            padding-left: 0;
        }

        &.wide {
            padding-left: 8rem;

            .label {
                width: 7.5rem;
                margin-left: -7.5rem;
            }
        }

        .label {
            display: block;
            float: left;
            text-align: right;
            line-height: 0.7rem;
            padding: 0.4rem 0.5rem 0.4rem 0;
            margin: 0 0 0 -4.5rem;
            width: 4.5rem;
            overflow: hidden;

            &.label-lg {
                line-height: 2rem;
            }

            span {
                color: red;
                display: inline-block;
                line-height: 0.7rem;
                font-size: 0.6rem;
            }
        }

        .field {
            line-height: 1.5rem;
            margin-left: 0;
            min-height: 1.5rem;

            input[type=text], input[type=password] {
                width: 100%;
            }

            label {
                border: 0.05rem solid #EEE;
                border-radius: 0.15rem;
                padding: 0 0.5rem;
            }

            .help {
                color: var(--color-tertiary);
                line-height: 0.9rem;
                padding: 0.25rem 0;
                font-size: 0.6rem;

                p {
                    margin: 0;
                    line-height: 1.5em;
                }
            }

            textarea {
                line-height: 1.5em;
                width: 100%;
            }

            .row.no-gutters {
                input[name="captcha"] {
                    border-top-right-radius: 0;
                    border-bottom-right-radius: 0;
                }

                .captcha {
                    border-top-left-radius: 0;
                    border-bottom-left-radius: 0;
                    border-left: 0;
                }
            }

            .captcha {
                height: 1.6rem;
                width: 100%;
                border: 0.05rem solid #DDD;
                border-radius: 0.15rem;
                cursor: pointer;

                &.captcha-lg {
                    height: 2rem;
                }
            }

            .tag {
                border: 0.05rem solid #EEE;
                display: inline-block;
                line-height: 1rem;
                border-radius: 0.15rem;
                padding: 0 0.15rem;
                background: #EEE;
                color: #666;
                margin-right: 0.15rem;
                font-size: 0.6rem;
                white-space: nowrap;
            }
        }
    }

    &.flat {
        .line {
            padding: 0.5rem;

            .label {
                float: none;
                margin: 0;
                width: 100%;
                text-align: left;
                line-height: inherit !important;
                padding-bottom: 0.25rem;
            }
        }
    }
}

@media (max-width: 40rem) {
    .ub-form {
        &.wide .line, &.wide-lg .line, .line {
            padding-left: 0.5rem;
            padding-right: 0.5rem;
            margin: 0;

            .label {
                float: none;
                display: block;
                text-align: left;
                margin-left: 0;
                width: 100%;
            }
        }
    }
}



